<template>
    <div class="user-history_data-box">
        <mt-datetime-picker
                ref="picker"
                v-model="pickerValue"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="res">
        </mt-datetime-picker>

        <div class="act">
            <mt-button class="btn" type="default" @click="openPicker">选择查询日期</mt-button>
        </div>

        <div class="loading" v-if="loading"><mt-spinner type="fading-circle"></mt-spinner></div>
        <div  v-else>
            <table class="lists" v-if="lists.length" border=0  cellpadding="0" cellspacing="1" >
                <tr>
                    <th width="80">期数</th>
                    <th>开出号码</th>
                </tr>
                <tr v-for="item of lists">
                    <td>{{item.period}}</td>
                    <td>
                        {{item.result}}
                        <!--<span class="number" :class="{-->
                        <!--'num-1' : k === 0,-->
                        <!--'num-2' : k === 1,-->
                        <!--'num-3' : k === 2,-->
                        <!--'num-4' : k === 3,-->
                        <!--'num-5' : k === 4,-->
                        <!--'num-6' : k === 5,-->
                        <!--'num-7' : k === 6,-->
                        <!--'num-8' : k === 7,-->
                        <!--'num-9' : k === 8,-->
                        <!--'num-10' : k === 9,-->
                        <!--}" v-for="(num,k) of item.resultArr">{{num}}</span>-->
                    </td>
                </tr>
            </table>
            <div class="null" v-else>没有找到相关数据.</div>
        </div>

    </div>
</template>

<script>
    import { DatetimePicker , Toast} from 'mint-ui';
    import apiUrl from '@/api/apiUrl'
    export default {
        name: "index",
        data () {
            return {
                pickerValue: new Date(),
                loading: false,
                lists: [],
                year: this.getYear()
            }
        },
        filters: {
            split(val) {
                return val.splice(',')
            }
        },
        methods: {
            openPicker() {
                this.$refs.picker.open();
            },
            getYear () {
                return 2018
            },
            res (d) {
                this.loading = true
                let params = {
                        params: {
                            timestamp: Date.parse(d)
                        }
                }
                this.$http.get(apiUrl.api.getHistoryData, params).then(res => {
                    if (res.data.code === 0) {
                        this.lists = res.data.result
                        this.lists.forEach((v, k) => {
                            this.lists[k]['resultArr'] = v.result.split(',')
                        })
                    } else {
                        Toast(res.data.msg)
                    }
                    this.loading = false
                }).catch(err => {
                    console.log(err)
                    this.loading = false
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .user-history_data-box {
        padding: @default;
        .act {
            width: 100%;
            .btn {
                width: 100%;
            }
        }
        .loading {
            width: 100%;
            margin-top: @default;
            display: flex;
            justify-content: center;
        }
        .lists {
            background: @gray;
            width: 100%;
            margin-top: @default;
            th {
                background: @wran;
                padding: @middle;
                color: white;
                font-weight: normal;
            }
            td {
                background: white;
                padding: @middle;
                .number {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    display: inline-block;
                    text-align: center;
                    margin-right: 3px;
                }
            }
        }
        .null {
            margin-top: @default;
            text-align: center;
            color: @gray;
        }
    }
</style>